<template>
  <div class="home-page">
    <div class="bg"></div>
    <!-- 头部 -->
    <div class="home-header">
      <van-field v-model="value1" left-icon="search" center placeholder="开封旅游套票" class="search" clearable
        @clear="getList()">
        <template #button>
          <span @click="searchBtn" style="color:#fff;padding:0px 5px">搜索</span>
        </template>
      </van-field>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in acLists" :key="index" @click="getActivityDetail(item.id)">
          <img style="width: 100%;height: 100%;" :src="baseURL + item.fileList[0].filePath" alt=""></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 导航 -->
    <div class="home-navs">
      <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
        <div v-for="(item, index) in lists" :key="index" class="card" @click="getDetail(item.id)"
          v-show="item?.display == 'Y'" v-if="lists.length">
          <img :src="baseURL + item.fileList[0].filePath" alt="">
          <div class="info">
            <p>{{ item.scenicName }}</p>
            <span v-for="items in item.scenicLabel.split(',')" :key="items">
              {{ scenic_label_type[items].label }}
            </span>
            <div>
              <span><i v-if="item.weekdayPrice">￥</i>{{ item.weekdayPrice }}</span>
              <van-button native-type="submit" round type="primary" size="small" color="#B50C16">
                <span style="padding:0 10px;font-size: 16px;">预定</span>
              </van-button>
            </div>
          </div>
        </div>
        <van-empty :image="empty" image-size="200"  description="暂无数据" v-if="!lists.length && loading == false" />
      </van-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted } from "vue";
import { useRouter } from 'vue-router'
import { getAcitivityList, getScenicList } from '@/services/home'
import { baseURL } from '@/utils/request'
import empty from "@/assets/empty.png";
const { proxy } = getCurrentInstance();
const { scenic_label_type } = proxy.useDict("scenic_label_type");

const value1 = ref('');

const lists = ref([]);
const acLists = ref([]);
const router = useRouter()
const total = ref();
const loading = ref(false);
const finished = ref(false);
const pageNum = ref(1);
const searchBtn = () => {
  getList()
  console.log("搜索");
};
const getDetail = (id: number | string) => {
  router.push('/home/detail?id=' + id)
};
const getActivityDetail = (id: number | string) => {
  router.push('/article/activityDetail?id=' + id)
};
const getList = () => {
  getScenicList({
    scenicName: value1.value,
    orderByColumn: "recommend,createTime",
    isAsc: "desc,desc",
  }).then(res => {
    console.log('首页列表：', res);
    lists.value = res.rows
  })
}
const getAcList = () => {
  getAcitivityList({
    pageSize: 5,
    pageNum: 1,
    orderByColumn: "recommend,createTime",
    isAsc: "desc,desc",
  }).then(res => {
    acLists.value = res.rows
  })
}
const onLoad = () => {
  getScenicList({
    pageNum: pageNum.value++,
    scenicName: value1.value,
    orderByColumn: "recommend,createTime",
    isAsc: "desc,desc"
  }).then(res => {
    if (res.code == 200) {
      console.log("res::", res);
      lists.value = lists.value.concat(res.rows)
      total.value = res.total
      // 加载状态结束
      loading.value = false;

      // 数据全部加载完成
      if (lists.value.length >= total.value) {
        finished.value = true;
      }
    }
  })
};
onMounted(() => {
  // getList()
  getAcList()
})
</script>


<style lang="scss" scoped>
.home-page {
  position: relative;
  z-index: 1;
  background-color: var(--cp-bg);
  padding-top: 20px;
  left: 0px;
  top: 0px;
  width: 375px;
  min-height: calc(100vh - 50px);

  .bg {
    position: fixed;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 335px;
    background: linear-gradient(180deg,
        rgba(234, 66, 62, 1) 0%,
        rgba(238, 130, 91, 0) 100%);
  }

  .home-header {
    .search {
      margin: auto;
      width: 345px;
      height: 40px;
      line-height: 40px;
      border-radius: 20px;
      border: 1px solid #fff;
      background-color: transparent;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      align-items: center;
      font-size: 13px;
      color: #fff;
      margin-bottom: 20px;
    }

    .my-swipe {
      margin: auto;
      width: 345px;
      height: 120px;
      border-radius: 8px;
    }

    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
  }

  .home-navs {
    padding: 10px 15px 50px 15px;

    // background-color: #f4f4f4;
    .card {
      background-color: #fff;
      width: 345px;
      //   min-height: 305px;
      //   background-color: #ccc;
      margin-bottom: 15px;
      border-radius: 12px;
      overflow: hidden;

      img {
        width: 345px;
        height: 180px;
      }

      .info {
        margin-left: 10px;

        // background-color: pink;
        p {
          width: 330px;
          padding: 8px 0;
          font-size: 16px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;

          // &>span {
          //   font-size: 12px;
          //   color: var(--cp-text3);
          //   font-weight: 600;
          // }
        }

        &>span {
          font-size: 11px;
          color: #ccc;
          border: 1px solid #ccc;
          padding: 2px 3px;
          margin-right: 5px;
        }

        div {
          margin: 7px 0;
          margin-right: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          &>span {
            font-size: 24px;
            color: rgba(203, 22, 29, 1);

            i {
              font-size: 12px;
              font-style: inherit;
            }
          }
        }
      }
    }
  }
}

.home-banner {
  padding: 10px 15px;
  height: 100px;

  img {
    width: 100%;
    height: 100%;
  }
}

:deep(.van-field__control::-webkit-input-placeholder) {
  color: #fff;
}

:deep(.van-field__control) {
  color: #fff;
}
</style>
